<template>
	<el-header>
		<div class="header-left">
			<el-button :key="plain" @click=" navigate='toTxt' " style="height:100px;width:200px;font-size:large;text-align:center;">文到图搜索</el-button>
		</div>
		<div class="header-right">
			<el-button :key="plain" @click="navigate='toImg' " style="height:100px;width:200px;font-size:large;">图到图搜索</el-button>
		</div>
	</el-header>
	<template v-if="navigate=='toTxt' ">
		<BaseTxt />
	</template>
	<template v-if="navigate=='toImg' ">
		<BaseImg />
	</template>
</template>

<script setup>
import { provide,ref } from 'vue'
import Header from './layout/Header.vue'
import BaseImg from './layout/BaseImg.vue';
import BaseTxt from './layout/BaseTxt.vue';
const navigate=ref('toTxt')
</script>

<style lang="less" scoped>
.el-header {
  padding: 0 16px 0 0;
  border-bottom: 1px solid @borderColor;
  display: flex;
  width: 400px;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  text-align: center;

  .header-left {
   display: flex;
    font-size: 24px;
    overflow: hidden;
    white-space: nowrap;

    width: 200px;
  }
  .header-right {
    display: flex;
    align-items: center;
    text-align: center;
    padding-left: 8px;
    width: 200px;
		:deep(.el-badge) {
			sup {
				top: 9px;
				right: 24px;
			}
		}
		.el-icon {
			padding: 8px 3px;
			font-size: 20px;
			cursor: pointer;
			margin: 0 8px;
		}

  }
}
</style>
